<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>DEMOS</title>
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <style>
        #btn-close-modal {
            float: right;
            text-emphasis: none;
            cursor: pointer;
            color: #fff;
            z-index: 100;
            margin: 5px;
        }

        html,
        body {
            height: 100%;
        }


        body {
            background-color: #000000;
            margin: 0;
            font-family: Helvetica, sans-serif;
            background-image: url('http://img.netbian.com/file/2020/0904/de2f77ed1090735b441ba5e4c2b460ca.jpg');
            overflow: hidden;
        }

        a {
            color: #000000;
        }

        .element {
            width: 120px;
            height: 160px;
            box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
            border: 1px solid rgba(127, 255, 255, 0.25);
            text-align: center;
            cursor: default;
        }

        .element:hover {
            box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
            border: 1px solid rgba(127, 255, 255, 0.75);
        }

        .element .number {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 12px;
            color: rgba(127, 255, 255, 0.75);
        }

        .element .symbol {
            position: absolute;
            top: 40px;
            left: 0px;
            right: 0px;
            font-size: 60px;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.75);
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
        }

        .element .details {
            position: absolute;
            bottom: 15px;
            left: 0px;
            right: 0px;
            font-size: 12px;
            color: rgba(127, 255, 255, 0.75);
        }

    </style>
    <script src="js/three.min.js"></script>
    <script src="js/tween.min.js"></script>
    <script src="js/TrackballControls.js"></script>
    <script src="js/CSS3DRenderer.js"></script>
    <script src="data.js"></script>
</head>

<body>

    <!--Call your modal-->
    <ul>
        <li><a id="demo01" href="#animatedModal">DEMO01</a></li>
        <li><a id="demo02" href="#modal-02">DEMO02</a></li>
    </ul>


    <!--DEMO01-->
    <div id="animatedModal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
        <div id="btn-close-modal" class="close-animatedModal">
            X
        </div>

        <div class="modal-content" id="container">
        </div>
    </div>

    <!--DEMO02-->
    <div id="modal-02">
        <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
        <div id="btn-close-modal" class="close-modal-02">
            X
        </div>

        <div class="modal-content">
            <!--Your modal content goes here-->
        </div>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/animatedModal.js"></script>
    <script>

        //demo 01
        $("#demo01").animatedModal({
            color: "rgba(0,0,0,0.5)", 
            beforeOpen: function () {
                randomTable();
            }
        });

        //demo 02
        $("#demo02").animatedModal({
            animatedIn: 'lightSpeedIn',
            animatedOut: 'bounceOutDown',
            color: '#fff',
            // Callbacks
            beforeOpen: function () {
                console.log("The animation was called");
            },
            afterOpen: function () {
                console.log("The animation is completed");
            },
            beforeClose: function () {
                console.log("The animation was called");
            },
            afterClose: function () {
                console.log("The animation is completed");
            }
        });

    </script>
    <script>


        var camera, scene, renderer;
        var controls;

        var objects = [];
        var targets = { sphere: [] };

        init();
        animate();
        function randomTable() {
            for (var i = 0, l = objects.length; i < l; i++) {
                objects[i].position.x = Math.random() * 4000 - 2000;
                objects[i].position.y = Math.random() * 4000 - 2000;
                objects[i].position.z = Math.random() * 4000 - 2000;
            }
            transform(targets.sphere, 3000);
        }
        function init() {

            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.z = 2450;

            scene = new THREE.Scene();


            //random
            let x1 = 1, y1 = 1;
            let row1 = Math.ceil(table.length / 18);
            for (var i = 0; i < table.length; i++) {

                var element = document.createElement('div');
                element.className = 'element';
                element.style.backgroundColor = 'rgba(0,100,127,' + (Math.random() * 0.5 + 0.25) + ')';

                var number = document.createElement('div');
                number.className = 'number';
                number.textContent = i + 1;
                element.appendChild(number);

                var symbol = document.createElement('div');
                symbol.className = 'symbol';
                symbol.textContent = table[i]["name"];
                element.appendChild(symbol);

                var details = document.createElement('div');
                details.className = 'details';
                details.innerHTML = table[i]["count"];
                element.appendChild(details);

                var object = new THREE.CSS3DObject(element);
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add(object);

                objects.push(object);

                //


            }

            // sphere

            var vector = new THREE.Vector3();

            for (var i = 0, l = objects.length; i < l; i++) {

                var phi = Math.acos(-1 + (2 * i) / l);
                var theta = Math.sqrt(l * Math.PI) * phi;

                var object = new THREE.Object3D();

                object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
                object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
                object.position.z = 800 * Math.cos(phi);

                vector.copy(object.position).multiplyScalar(2);

                object.lookAt(vector);

                targets.sphere.push(object);

            }



            //

            renderer = new THREE.CSS3DRenderer();
            console.log(window.innerWidth, window.innerHeight)
            renderer.setSize(window.innerWidth - 25, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);

            //

            controls = new THREE.TrackballControls(camera, renderer.domElement);
            controls.rotateSpeed = 0.5;
            controls.minDistance = 500;
            controls.maxDistance = 3000;
            controls.addEventListener('change', render);


            // transform(targets.sphere, 4000);

            //

            window.addEventListener('resize', onWindowResize, false);

        }

        function transform(targets, duration) {

            TWEEN.removeAll();

            for (var i = 0; i < objects.length; i++) {

                var object = objects[i];
                var target = targets[i];

                new TWEEN.Tween(object.position)
                    .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
                    .easing(TWEEN.Easing.Exponential.InOut)
                    .start();

                new TWEEN.Tween(object.rotation)
                    .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
                    .easing(TWEEN.Easing.Exponential.InOut)
                    .start();

            }

            new TWEEN.Tween(this)
                .to({}, duration * 2)
                .onUpdate(render)
                .start();

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth - 25, window.innerHeight);

            render();

        }

        function animate() {

            requestAnimationFrame(animate);

            TWEEN.update();

            controls.update();

        }

        function render() {

            renderer.render(scene, camera);

        }

    </script>
</body>

</html>